<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #wraper {
        /* background-image:url("../static/images/image1.jpg");
            */
        background-size: 100%;
        transition: all 2s;
        /* 实现模糊效果 - 值越大越模糊 */
        -webkit-filter: blur(10px);
        /* Chrome,Opera */
        -moz-filter: blur(10px);
        -ms-filter: blur(10px);
        filter: blur(10px);
      }
      .form {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%);
        width: 30%;
        min-width: 240px;
        /* border:1px solid #000;
            */
        border-radius: 10px;
        box-sizing: border-box;
        padding: 20px 20px;
        background-color: rgba(52, 0, 95, 0.377);
        box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.616);
      }
      .form label {
        display: block;
        width: 30%;
        min-width: 100px;
        float: left;
        height: 40px;
        line-height: 40px;
        margin: 10px 0;
        font-size: 18px;
        color: #fff;
      }
      .form input {
        width: 70%;
        min-width: 200px;
        box-sizing: border-box;
        height: 40px;
        margin: 10px 0;
        background-color: #ffffff00;
        border: 1px solid #eee;
        border-radius: 20px;
        outline: none;
        padding: 0 10px;
        box-sizing: border-box;
        font-size: 18px;
        color: #eee;
      }
      .form button {
        width: 70%;
        height: 40px;
        background-color: rgba(255, 255, 255, 0);
        /* border:1px solid #fff;
            */
        background-color: rgba(42, 0, 48, 0.438);
        border: none;
        border-radius: 20px;
        color: #eee;
        font-size: 18px;
        margin: 10px 0 10px 30%;
        outline: none;
        cursor: pointer;
      }
      .form button:hover {
        /* border:none;
            */
        background-color: rgba(42, 0, 48, 0.548);
      }
    </style>
  </head>
  <body>
    <div id="wraper"></div>

    <div class="form">
      <label for="username">Username</label>
      <input id="username" type="text" value="admin" />

      <label for="password">Password</label>
      <input id="password" type="password" />

      <label for="email">Email</label>
      <input id="email" type="text" />

      <label for="qq">QQ</label>
      <input id="qq" type="text" />

      <button>Login</button>
    </div>

    <script
      type="application/javascript"
      src="../static/plugins/jquery/jquery.js"
    ></script>
    <script type="application/javascript">
      $(function () {
        //拿到浏览器的宽和高
        // $(window).height()  //浏览器当前窗口可视区域高度
        // $(document).height()    //浏览器当前窗口文档的高度
        // $(document.body).height()   //浏览器当前窗口文档body的高度
        // $(document.body).outerHeight(true)  //浏览器当前窗口文档body的总高度 包括border padding margin

        var width = $(window).width;
        var height = $(window).height;

        //切换图片的数组
        var images = [
          "http://www.jq22.com/img/cs/500x300-9.png",
          "http://www.jq22.com/img/cs/500x300-8.png",
          "http://www.jq22.com/img/cs/500x300-7.png",
          "http://www.jq22.com/img/cs/500x300-6.png",
        ];

        var num = 0;
        $("#wraper").css("backgroundImage", "url(" + images[num] + ")");
        //设置宽高
        //$('#wraper').css({'width': width, 'height': height});
        $("#wraper").css("width", width).css("height", height);

        //每5秒更换一次背景
        setInterval(changeBackground, 5000);

        function changeBackground() {
          if (num >= images.length - 1) {
            num = 0;
          } else {
            num++;
          }
          $("#wraper").css("backgroundImage", "url(" + images[num] + ")");
        }
      });
    </script>
  </body>
</html>
